<!DOCTYPE html>
<html lang="en" dir="ltr">
    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="./lib/vue.js"></script>
        <link rel="stylesheet" href="./lib/bootstrap.css">
    </head>
    <body>
        <div id="app">

            <div class="panel panel-primary">
                <div class="panel-heading">
                    <h3 class="panel-title">添加品牌</h3>
                </div>
                <div class="panel-body form-inline">
                    <label>
                        Id:
                        <input type="text" class="form-control" v-model="id">
                    </label>
                    <label>
                        Name:
                        <input type="text" class="form-control"  v-model="name">
                    </label>
                    <!-- 在vue中,使用事件绑定机制,为元素指定处理函数的时候,如何加了小括号,就可以给函数传参了 -->
                    <input type="button" class="btn btn-primary" value="添加" @click="add">

                    <label>
                      搜索名称关键字:
                      <input type="text"class="form-control"  v-model="keywords">
                    </label>
                </div>
            </div>

            <table class="table table-bordered tabel-hover table-striped">
                <thead>
                    <tr>
                        <th>Id</th>
                        <th>Name</th>
                        <th>Ctime</th>
                        <th>Operation</th>
                    </tr>
                </thead>
                <tbody>
                  <!-- 原本遍历data中的list -->
                  <!-- 现在根据查询条件显示数据需要添加方法进行处理显示 -->
                    <tr v-for="item in search(keywords)" :key="item.id">
                        <td>{{item.id}}</td>
                        <td v-text="item.name"></td>
                        <td>{{item.ctime}}</td>
                        <td>
                            <a href="" @click.prevent='del(item.id)'>删除</a>
                        </td>
                    </tr>
                </tbody>
            </table>

        </div>

        <script>
            var vm = new Vue({
                el: '#app',
                data: {
                    id: '',
                    name: '',
                    list: [
                        {id: 1, name: '奔驰', ctime: new Date() },
                        {id: 2, name: '宝马', ctime: new Date() },
                        {id: 3, name: '奥迪', ctime: new Date() }
                    ],
                    keywords: '' // 搜索的关键字
                },
                methods: {
                    add(){ // 添加的方法
                        // 过程分析
                        // 1. 获取id和name
                        // 2. 组成对象
                        // 3. 把对象调用数组的相关方法,添加到当前data上的list中
                        var car = {id: this.id, name: this.name, ctime: new Date()};
                        this.list.push(car);
                        this.id = this.name = '';
                    },
                    del(id){ // 根据id删除数据
                        // 过程分析
                        // 1. 如何根据id,找到删除这一项的索引
                        // 2. 如果找到索引, 直接调用数组的splice方法
                        this.list.some((item,i) => {
                            if(item.id == id){
                                // splice() 向数组添加或删除项目
                                this.list.splice(i,1)
                                // 在数组的方法中,如果return true, 就会立即终止数组的循环
                                return true;
                            }
                        })

                        // 第二种方式
                        // var index = this.list.findIndex(item => {
                        //     if(item.id == id){
                        //         return true;
                        //     }
                        // });
                        //
                        // this.list.splice(index,1);

                    },
                    search(keywords) { // 根据关键字进行数据的搜索
                    //   var newList = [];
                    //   this.list.forEach(item => {
                    //     if(item.name.indexOf(keywords) != -1) {
                    //       newList.push(item);
                    //     }
                    //   })
                    //   return newList;
                    // }

                    // 注意: forEach some filter findIndex 这些都属于数组的新方法
                    // 都会对数组中的每一项进行遍历,执行相关的操作
                    return this.list.filter(item => {
                      // ES6 中,为字符串提供了一个新的方法,叫 String.prototype.includes('要包含的字符串')
                      // 如果包含,则返回true,否则返回false
                      if(item.name.includes(keywords)){
                        return item;
                      }
                    })
                }
              }
            });

        </script>
    </body>
</html>
